<template>
	<view class="mine">
		<view class="avatar">
			<img style="width: 65rpx; height: 65rpx; border-radius: 50%;" src="@/static/img/avatar.png" alt="" />
			<span style="margin: 0rpx 20rpx;">{{userInfo.phone}}</span>
		</view>
		<!-- <view class="region">
			<view class="left">
				<img style="width: 25rpx; height: 25rpx;" src="@/static/img/avatar.png" alt="" /><span style="margin: 0rpx 20rpx;">负责区域</span>
			</view>
			<view class="right" @click="openAddress">
				<span style="width: 94%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{userInfo.area}}</span><span style="margin-left: 20rpx;">></span>
			</view>
		</view> -->
		<!-- <view class="bar-counter">
			<view class="left">
				<img style="width: 25rpx; height: 25rpx;" src="@/static/img/avatar.png" alt="" /><span style="margin: 0rpx 20rpx;">负责吧台</span>
			</view>
			<view class="right">
				<span>28台</span><span style="margin-left: 20rpx;">></span>
			</view>
		</view> -->
		<view class="withdrawal">
			<view class="withdrawal-main">
				<view class="item">
					<view class="num">
						{{userInfo.orderNum}}
					</view>
					<view class="name">
						累计订单
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{userInfo.cumulative}}
					</view>
					<view class="name">
						总收益
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{userInfo.drawable}}
					</view>
					<view class="name">
						可提现
					</view>
				</view>
			</view>
			<view class="withdrawal-btn" @click="withdrawal_btn">
				提现
			</view>
		</view>
		<view class="promotion" @click="order_btn">
			<view class="left">
				<img style="width: 25rpx; height: 25rpx;" src="@/static/img/avatar.png" alt="" /><span style="margin: 0rpx 20rpx;">我的订单</span>
			</view>
			<view class="right">
				<span>查看</span><span style="margin-left: 20rpx;">></span>
			</view>
		</view>
		<view class="promotion" @click="promotion_copy_btn">
			<view class="left">
				<img style="width: 25rpx; height: 25rpx;" src="@/static/img/avatar.png" alt="" /><span style="margin: 0rpx 20rpx;">推广</span>
			</view>
			<view class="right">
				<span>查看</span><span style="margin-left: 20rpx;">></span>
			</view>
		</view>
		<view class="property" @click="property_btn">
			<view class="left">
				<img style="width: 25rpx; height: 25rpx;" src="@/static/img/avatar.png" alt="" /><span style="margin: 0rpx 20rpx;">我的资产</span>
			</view>
			<view class="right">
				<span>查看</span><span style="margin-left: 20rpx;">></span>
			</view>
		</view>
		<view class="binding" @click="binding_btn">
			<view class="left">
				<img style="width: 25rpx; height: 25rpx;" src="@/static/img/avatar.png" alt="" /><span style="margin: 0rpx 20rpx;">提现绑定</span>
			</view>
			<view class="right">
				<span>查看</span><span style="margin-left: 20rpx;">></span>
			</view>
		</view>
		 <!-- 自定义Toast -->  
		<view v-if="showToast" class="custom-toast">
			<view style="text-align: center;">
				<view class="">已复制推广链接</view>
				<view class="toast-text">这是一条包含额外信息的提示</view>  
			</view>
		</view>  
		<yaor-address ref="show" :selectlist="userInfo.area" @transmit="transmit"></yaor-address>
	</view>
</template>

<script>
import { getByUserId, barRiderUpdate } from '@/api/user.js'
export default {
  data () {
    return {
			showToast: false,
			userInfo: {}
    }
  },
	onShow() {
		this.getUser()
	},
	mounted() {
		this.getUser()
	},
  methods: {
		getUser() {
			getByUserId().then(res => {
				this.userInfo = res.data
			})
		},
		openAddress() {
			this.$refs.show.open()
		},
		transmit(e) {
			let arr = []
			let address = []
			let str = e.allArr[0].name + '' + e.allArr[1].name
			arr = e.allArr.slice(2, e.allArr.length)
			arr.forEach(item => {
				address.push(str + item.name)
			})
			this.userInfo.area = address.join(',')
			barRiderUpdate(this.userInfo)
		},
		withdrawal_btn() {
			uni.navigateTo({
				url: '/pages/withdrawal/index'
			})
		},
		promotion_copy_btn() {
			uni.setClipboardData({
				data: '这是一条包含额外信息的提示'
			});
			this.showToast = true;  
			// 假设3秒后隐藏Toast  
			setTimeout(() => {  
				this.showToast = false;  
			}, 3000);  
		},
		order_btn() {
			uni.navigateTo({
				url: '/pages/order/index?riderId=' + this.userInfo.riderId
			})
		},
		property_btn() {
			uni.navigateTo({
				url: '/pages/property/index'
			})
		},
		binding_btn() {
			uni.navigateTo({
				url: '/pages/binding/index'
			})
		}
  }
}
</script>

<style lang="scss">
	.mine{
		padding: 20rpx;
		.avatar{
			display: flex;
			align-items: center;
		}
		.region{
			font-size: 24rpx;
			padding: 20rpx;
			background-color: #F5F6F7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0rpx;
			.left{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.right{
				width: 70%;
				text-align: right;
				display: flex;
			}
		}
		.bar-counter{
			font-size: 24rpx;
			padding: 20rpx;
			background-color: #F5F6F7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0rpx;
			.left{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.right{
				width: 20%;
				text-align: right;
			}
		}
		.withdrawal{
			width: 100%;
			height: 300rpx;
			font-size: 26rpx;
			margin: 20rpx 0rpx;
			background: linear-gradient(to right, #1984FC, #3BADFF);
			border-radius: 8rpx;
			.withdrawal-main{
				color: #fff;
				height: 200rpx;
				display: flex;
				justify-content: space-around;
				text-align: center;
				align-items: center;
				.item{
					.num{
						margin: 10rpx 0;
						font-size: 28rpx;
						font-weight: bold;
					}
					.name{
						margin: 10rpx 0;
					}
				}
			}
			.withdrawal-btn{
				width: 300rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #fff;
				margin: auto;
				text-align: center;
				border-radius: 8rpx;
			}
		}
		.promotion{
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0rpx;
			.left{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.right{
				width: 70%;
				text-align: right;
				color: #999;
			}
		}
		.property{
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0rpx;
			.left{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.right{
				width: 70%;
				text-align: right;
				color: #999;
			}
		}
		.binding{
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0rpx;
			.left{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.right{
				width: 70%;
				text-align: right;
				color: #999;
			}
		}
	}
	.custom-toast {  
	  position: fixed;  
	  bottom: 50%;  
	  left: 50%;  
	  transform: translateX(-50%);  
	  padding: 10px;  
	  background-color: rgba(0, 0, 0, 0.7);  
	  color: #fff;  
	  border-radius: 5px;  
	  z-index: 1000; /* 确保Toast在最上层显示 */  
	  display: flex;  
	  align-items: center;  
	}  
	.toast-icon {  
	  width: 20px; /* 根据实际图标大小调整 */  
	  height: 20px; /* 根据实际图标大小调整 */  
	  margin-right: 10px;  
	}  
	.toast-text {  
	  font-size: 14px;  
	} 
</style>